<template>
  <div class="total">
    <div class="contentDiv">
      <div class="searchDiv">
        <div>
          <el-tabs v-model="activeName" @tab-click="handleClick">
<!--            <el-tab-pane label="告警统计" name="first"></el-tab-pane>-->
            <el-tab-pane label="报表统计" name="second"></el-tab-pane>
            <el-tab-pane label="能耗统计" name="third"></el-tab-pane>
            <el-tab-pane label="仓库统计" name="fourth"></el-tab-pane>
          </el-tabs>
        </div>
        <div class="waringStyle">
          <el-date-picker
            v-model="valueDate"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions">
          </el-date-picker>
          <el-button class="ml10" type="primary" plain >搜索</el-button>
        </div>
      </div>
      <div class="tableList">
<!--        <el-table :data="tableData1"  ref="tableWaring" :header-cell-style="{ 'background-color': 'transparent' }" >-->
<!--          <el-table-column property="xh" label="序号"></el-table-column>-->
<!--          <el-table-column property="station" label="告警站点" ></el-table-column>-->
<!--          <el-table-column property="content" label="告警内容" ></el-table-column>-->
<!--          <el-table-column property="person" label="负责人信息" ></el-table-column>-->
<!--          <el-table-column property="waringji" label="告警级别">-->
<!--            <template #default="scope">-->
<!--              <span :style="{ color: getWaringColor(scope.row.waringji) }">{{ scope.row.waringji }}</span>-->
<!--            </template>-->
<!--          </el-table-column>-->
<!--          <el-table-column property="waringDate" label="告警时间"></el-table-column>-->
<!--          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">-->
<!--            <template #default="scope">-->
<!--              <el-button-->
<!--                size="mini"-->
<!--                type="text"-->
<!--                @click="handleUpdate(scope.row)"-->
<!--              >查看详情</el-button>-->
<!--            </template>-->
<!--          </el-table-column>-->
<!--        </el-table>-->
        <el-table v-if="activeName === 'first'" :data="tableData1"   :header-cell-style="{ 'background-color': 'transparent' }" >
          <el-table-column property="xh" label="序号" width="100"></el-table-column>
          <el-table-column property="station" label="告警类型" ></el-table-column>
          <el-table-column property="content" label="告警内容" ></el-table-column>
          <el-table-column property="person" label="负责人信息" ></el-table-column>
          <el-table-column property="waringji" label="告警级别">
         
          </el-table-column>
          <el-table-column property="waringDate" label="告警时间"></el-table-column>
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template #default="scope">
              <el-button
                size="mini"
                type="text"
                @click="handleUpdate(scope.row)"
              >查看详情</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-table v-if="activeName === 'second'" :data="tableData2"   :header-cell-style="{ 'background-color': 'transparent' }" >
          <el-table-column property="xh" label="序号" width="100"></el-table-column>
          <el-table-column property="station" label="报表名称" ></el-table-column>
          <el-table-column property="content" label="报表类型" ></el-table-column>
          <el-table-column property="person" label="创建时间" ></el-table-column>
          <el-table-column property="waringji" label="所属水厂"></el-table-column>
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template #default="scope">
              <el-button
                size="mini"
                type="text"
                @click="handleUpdate(scope.row)"
              >查看详情</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-table v-if="activeName === 'third'"  :data="tableData3"   :header-cell-style="{ 'background-color': 'transparent' }" >
          <el-table-column property="xh" label="序号" width="100"></el-table-column>
          <el-table-column property="station" label="能耗类型" ></el-table-column>
          <el-table-column property="content" label="能耗周期" ></el-table-column>
          <el-table-column property="person" label="上月能耗（kw/h）" ></el-table-column>
          <el-table-column property="sperson" label="本月能耗（kw/h）" ></el-table-column>
          <el-table-column property="waringji" label="联系电话"></el-table-column>
          <el-table-column property="waringDate" label="负责人"></el-table-column>
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template #default="scope">
              <el-button
                size="mini"
                type="text"
                @click="handleUpdate(scope.row)"
              >查看详情</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-table v-if="activeName === 'fourth'" :data="tableData4"   :header-cell-style="{ 'background-color': 'transparent' }" >
          <el-table-column property="xh" label="序号" width="100"></el-table-column>
          <el-table-column property="station" label="仓库名称" ></el-table-column>
          <el-table-column property="sbtation" label="设备名称" ></el-table-column>
          <el-table-column property="content" label="设备编号" ></el-table-column>
          <el-table-column property="person" label="设备分类" ></el-table-column>
          <el-table-column property="waringji" label="设备型号"></el-table-column>
<!--          <el-table-column property="waringDate" label="设备状态"></el-table-column>-->
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template #default="scope">
              <el-button
                size="mini"
                type="text"
                @click="handleUpdate(scope.row)"
              >查看详情</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          background
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
    </div>

<!--    详情-->
    <div class="h100"  v-show="dialogTableVisible">
      <div class="tanDiv"></div>
      <div  class="diaStyle">
        <div class="export">
<!--          <el-button type="primary" size="mini" @click="exportExcel">导出</el-button>-->
        </div>
        <div class="xx" @click="hiddenTan"><img src="../../assets/images/xx.png" alt="" ></div>
        <div v-if="activeName === 'first'" class="warningContent">
          <div class="wt"><span>{{ form.waringji }}</span><i class="el-icon-warning ml10" style="font-size: 1.5rem;color: #E6307B;"></i></div>
          <div>
            <div class="baseSession">
              <el-row>
                <el-col :span="12">
                  <div class="grid-content">

                    <span>告警位置：</span>
                    <span>{{form.station}}</span>


                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="grid-content bg-purple-light">
                    <span>告警标题：</span>
                    <span>{{form.content}}</span>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <div class="grid-content ">

                    <span>级别：</span>
                    <span>{{form.waringji}}</span>


                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="grid-content bg-purple-light">
                    <span>告警类别：</span>
                    <span>{{form.waringtype}}</span>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <div class="grid-content ">

                    <span>告警设备：</span>
                    <span>{{form.waringshe}}</span>


                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="grid-content bg-purple-light">
                    <span>来源：</span>
                    <span>{{form.waringyuan}}</span>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <div class="grid-content ">

                    <span>告警时间：</span>
                    <span>{{form.waringdate}}</span>


                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="grid-content bg-purple-light">
                    <span>告警状态：</span>
                    <span>{{form.status}}</span>
                  </div>
                </el-col>
              </el-row>
            </div>
            <div class="mt10">
              <el-table :data="tableHis"  ref="tableHistory" :header-cell-style="{ 'background-color': 'transparent' }" >
                <el-table-column property="xh" label="序号"></el-table-column>
                <el-table-column property="station" label="时间" ></el-table-column>
                <el-table-column property="content" label="状态" ></el-table-column>
                <el-table-column property="person" label="处理人" ></el-table-column>
                <el-table-column property="waringDate" label="联系电话"></el-table-column>
              </el-table>
            </div>
          </div>
        </div>
        <div v-if="activeName === 'second'" class="warningContent">
          <div class="wt"><span>报表详情</span></div>
          <div>
            <div class="mt10">
              <el-table :data="tableData"  :header-cell-style="{ 'background-color': 'transparent' }">
                <el-table-column prop="date" label="日期" width="120"></el-table-column>
                <el-table-column prop="sampleNumber" label="样品编号" width="120"></el-table-column>
                <el-table-column prop="item" label="化验项目"></el-table-column>
                <el-table-column prop="result" label="结果"></el-table-column>
                <el-table-column prop="unit" label="单位"></el-table-column>
                <el-table-column prop="standardRequirement" label="标准要求"></el-table-column>
              </el-table>

            </div>
          </div>
        </div>
        <div v-if="activeName === 'third'" class="warningContent1">
          <div class="wt"><span>能耗统计详情</span>
            <div class="ml20">
              <el-date-picker
                v-model="kaoqinDate"
                type="date"
                placeholder="选择日期">
              </el-date-picker>
            </div>
          </div>
          <div class="wb">
            <div class="baseSession">
                <div class="leftSession">
                    <p>用电量：1000kw/h</p>
                    <p>用电周期：30天</p>
                    <p>上月用电：1200kw/h</p>
                    <p>负责人电话：17602323465</p>
                </div>
                <div class="rightSession">
                  <div id="kaoecharts" class="echart"></div>
                </div>
            </div>

          </div>
        </div>
        <div v-if="activeName === 'fourth'" class="warningContent">
          <div class="wt"><span>库存统计详情</span></div>
          <div>
            <div class="baseSession">
              <el-row>
                <el-col :span="12">
                  <div class="grid-content ">
                    <span>设备名称：</span>
                    <span>{{form.station}}</span>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="grid-content bg-purple-light">
                    <span>设备地点：</span>
                    <span>{{form.content}}</span>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <div class="grid-content ">

                    <span>设备编号：</span>
                    <span>{{form.waringji}}</span>


                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="grid-content bg-purple-light">
                    <span>设备厂家：</span>
                    <span>{{form.waringtype}}</span>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <div class="grid-content ">

                    <span>设备状态：</span>
                    <span>{{form.waringshe}}</span>


                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="grid-content bg-purple-light">
                    <span>设备厂家联系电话：</span>
                    <span>{{form.waringyuan}}</span>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <div class="grid-content ">

                    <span>运行开始时间：</span>
                    <span>{{form.waringdate}}</span>


                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="grid-content bg-purple-light">
<!--                    <span>告警状态：</span>-->
<!--                    <span>{{form.status}}</span>-->
                  </div>
                </el-col>
              </el-row>
            </div>
            <div class="mt10">
              <el-table :data="tableHis"  ref="tableHistory" :header-cell-style="{ 'background-color': 'transparent' }" >
                <el-table-column property="xh" label="序号"></el-table-column>
                <el-table-column property="station" label="故障时间" ></el-table-column>
                <el-table-column property="content" label="故障原因" ></el-table-column>
                <el-table-column property="person" label="处理人" ></el-table-column>
                <el-table-column property="waringDate" label="联系电话"></el-table-column>
              </el-table>
            </div>
          </div>
        </div>

      </div>
    </div>

<!--    解析弹框-->
    <div class="h101"  v-show="dialogjiexi">
      <div class="tanDiv"></div>
      <div  class="diaStyle">
        <div class="export">
<!--          <el-button type="primary" size="mini" @click="exportExcel">导出</el-button>-->
        </div>
        <div class="xx" @click="hiddenTan"><img src="../../assets/images/xx.png" alt="" ></div>

        <div v-if="activeName === 'first'"  class="warningContent">
          <div class="wt"><span>告警次数对比</span></div>
          <div class="wb">
            <div class="baseSession">
              <div id="totalecharts" class="echart"></div>
            </div>
          </div>
        </div>
        <div v-if="activeName === 'second'" class="warningContent">
          <div class="wt"><span>调度次数对比</span></div>
          <div class="wb">
            <div class="baseSession">
              <div id="totalecharts" class="echart"></div>
            </div>
          </div>
        </div>
        <div v-if="activeName === 'third'"  class="warningContent">
          <div class="wt"><span>出勤率对比</span></div>
          <div class="wb">
            <div class="baseSession">
              <div id="totalecharts" class="echart"></div>
            </div>
          </div>
        </div>
        <div v-if="activeName === 'fourth'" class="warningContent">
          <div class="wt"><span>设备故障率对比</span></div>
          <div class="wb">
            <div class="baseSession">
              <div id="totalecharts" class="echart"></div>
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  name: "total",
  data() {
    return {
      dialogTableVisible:false,
      dialogjiexi:false,
      tableData1:[
        {
          xh:1,
          station:'库存告警',
          content:'混凝剂缺少',
          person:'小杜 工号9527',
          waringji:'严重告警',
          waringDate:'2024-3-30'

        },
        {
          xh:2,
          station:'库存告警',
          content:'消毒剂',
          person:'小杜 工号9527',
          waringji:'重要告警',
          waringDate:'2024-3-30'

        },
        {
          xh:3,
          station:'水质告警',
          content:'浊度偏高',
          person:'小杜 工号9527',
          waringji:'一般告警',
          waringDate:'2024-3-30'
        }
      ],
      tableData2:[
        {
          xh:1,
          station:'化验日报表',
          content:'日报表',
          person:'2024-04-01',
          waringji:'A水厂',
          waringDate:'2024-3-30'

        },
        {
          xh:2,
          station:'化验月报表',
          content:'月报表',
          person:'2024-04-01',
          waringji:'A水厂',
          waringDate:'2024-3-30'

        },
        {
          xh:3,
          station:'消毒液采购报表',
          content:'采购报表',
          person:'2024-04-01',
          waringji:'A水厂',
          waringDate:'2024-3-30'
        }
      ],
      tableData3:[
        {
          xh:1,
          station:'1#曝气池',
          content:'4月',
          person:'1467',
          sperson:'1487',
          waringji:'15518659765',
          waringDate:'许原'

        },
        {
          xh:2,
          station:'2#曝气池',
          content:'4月',
          person:'1100',
          sperson:'1287',
          waringji:'15518659765',
          waringDate:'许原'

        },
        {
          xh:3,
          station:'1#沉砂池',
          content:'4月',
          person:'1200',
          sperson:'1187',
          waringji:'15518659765',
          waringDate:'许原'
        }
      ],
      tableData4:[
        {
          xh:1,
          station:'仓库1',
          sbtation:'液位计',
          content:'Y10010',
          person:'机械设备',
          waringji:'哈希1',
          waringDate:'2024-3-30'

        },
        {
          xh:2,
          station:'仓库2',
          sbtation:'消毒剂',
          content:'Y10011',
          person:'化验室物品',
          waringji:'29615-15',
          waringDate:'2024-3-30'

        },
        {
          xh:3,
          station:'仓库1',
          sbtation:'混凝剂',
          content:'Y100120',
          person:'化验室物品',
          waringji:'29615-18',
          waringDate:'2024-3-30'
        }
      ],
      // 总条数
      total: 10,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 5,
        valueDate: null,
      },
      activeName:'second',
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      valueDate: '',
      form:{
        waringji:'严重告警',
        station:'梁家务村处理站',
        content:'更换xxxx',
        waringtype:'耗材告警',
        waringshe:'垃圾桶',
        waringyuan:'xx',
        waringdate:'2024-01-01',
        status:'已自动派单',
      },
      tableHis:[{
        xh:1,
        station:'梁家务村处理站',
        content:'信号断开',
        person:'小杜 工号9527',
        waringDate:'2024-3-30',
      },{
        xh:2,
        station:'梁家务村处理站',
        content:'信号断开',
        person:'小杜 工号9527',
        waringDate:'2024-3-30',
      },{
        xh:3,
        station:'梁家务村处理站',
        content:'信号断开',
        person:'小杜 工号9527',
        waringDate:'2024-3-30',
      },{
        xh:4,
        station:'梁家务村处理站',
        content:'信号断开',
        person:'小杜 工号9527',
        waringDate:'2024-3-30',
      }],
      kaoqinDate:'',
      tableData: [
        { date: '2024-05-10', sampleNumber: '001', item: 'PH值', result: '7.2', unit: '', standardRequirement: '6.5-8.5' },
        { date: '2024-05-10', sampleNumber: '001', item: '氨氮', result: '5.6', unit: 'mg/L', standardRequirement: '<10' },
        { date: '2024-05-10', sampleNumber: '001', item: '总磷', result: '0.8', unit: 'mg/L', standardRequirement: '<1' },
        // 您可以根据需要添加更多的化验项目数据
      ]
    };
  },
  mounted() {

  },
  methods: {
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 查询信息列表 */
    getList() {
      this.loading = true;
      listCkxx(this.queryParams).then(response => {
        this.tableData = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    //搜索下拉选择事件
    handleSelectChange(value) {
      // 处理选择变化的逻辑，这里的 value 参数就是用户选择的值
      console.log('选择的值：', value);
    },
    //弹框点击展示对应table
    handleClick(tab, event) {
      switch (tab.name) {
        case 'first':
          // this.getList1();
          break;
        case 'second':
          // this.getList2();
          break;
        case 'third':
          // this.getList3();
          break;
        case 'fourth':
          // this.getList4();
          break;
        default:
          break;
      }
    },

    //图形解析
    jiexi(){

      this.dialogjiexi = true;
      this.jiexifunction()
    },

    //解析方法

    jiexifunction(){
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: 0,
          top: '8%',
          right: '3%',
          bottom: '8%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          axisLabel: {
            show: false // 不显示x轴标签
          },
          axisLine: {
            // x轴线的颜色以及宽度
            show: true,
            lineStyle: {color: 'rgba(255,255,255,0.1)'}
          },
          axisTick: {
            show: false // x轴刻度线
          },
          splitLine: { // x轴网格线
            show: true,
            lineStyle: {color: 'rgba(255,255,255,0.1)'}
          }
        },
        yAxis: {
          type: 'category',
          axisTick: { show: false }, // y轴刻度线
          axisLabel: { color: '#fff' }, // y轴文字的配置
          axisLine: {
            //x轴线的颜色
            show: true,
            lineStyle: {color: 'rgba(255,255,255,0.1)'}
          },
          data: ['1','2','3','4','5']
        },
        series: [
          {
            name: '人数',
            type: 'bar',
            stack: '总量',
            label: {
              normal: {
                show: true,
                position: 'inside', //显示在柱子内部
                textStyle: { color: '#fff' },
                formatter: '{c}' //单位
              }
            },
            itemStyle: {
              color: {
                colorStops:[ //柱子的渐变色
                  {
                    offset: 0,
                    color: 'rgba(5, 80, 57, 1)' // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: 'rgb(24,86,183)' // 100% 处的颜色
                  }
                ],
                global: false
              }
            },
            barWidth: 20, //柱子的宽度
            data: [88,75,53,39,36]
          }
        ]
      }

      this.myChart = echarts.init(document.getElementById("totalecharts"));
      this.myChart.setOption(option);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        this.myChart.resize();
      });
    },

    //隐藏弹框
    hiddenTan(){
      this.dialogTableVisible = false;
      this.dialogjiexi = false;
    },

    /** 查看按钮操作 */
    handleUpdate(row) {
      this.dialogTableVisible = true;
      this.kaoqinEcharts()



      // this.reset();
      // const storeId = row.storeId || this.ids
      // getCkxx(storeId).then(response => {
      //   this.form = response.data;
      //   this.open = true;
      // });
    },
    kaoqinEcharts(){

      const option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center',
          textStyle: {
            color: 'white' // 设置图例文本的颜色为红色
          }
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            padAngle: 5,
            itemStyle: {
              borderRadius: 10
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 1048, name: '1月' },
              { value: 1735, name: '2月' },
              { value: 1580, name: '3月' },
              { value: 1300, name: '4月' }
            ]
          }
        ]
      };

      this.myChart = echarts.init(document.getElementById("kaoecharts"));
      this.myChart.setOption(option);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        this.myChart.resize();
      });


    },
    getWaringColor(waringji) {
      switch (waringji) {
        case '严重告警':
          return '#E6307B'; // 严重告警的颜色
        case '重要告警':
          return '#ED6942'; // 重要告警的颜色
        case '一般告警':
          return '#0289FF'; // 一般告警的颜色
        default:
          return ''; // 默认颜色
      }
    }
  }
};
</script>

<style scoped lang="scss">
.total{
  width: 100%;
  height: 100%;

   :deep(.el-tabs__item) {
    font-size: 1.2rem!important;
    color: white;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
  }
   :deep(.el-tabs__item.is-active) {
    color: #1890ff;
  }
  .el-table, :deep(.el-table tr){
    background-color: transparent!important;
  }
  .el-table thead {
    background-color: transparent;
  }
   :deep(.el-table .el-table__header-wrapper th), :deep(.el-table .el-table__fixed-header-wrapper th) {
    color: white;
  }
   :deep(.el-table th.el-table__cell.is-leaf),  :deep(.el-table td.el-table__cell){
    border-bottom: none;
    color: white;
  }
   :deep(.el-table tr:hover) {
    background-color: transparent !important;
  }
   :deep(.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell) {
    background-color: transparent !important;
  }
   :deep(.el-table::before) {
    height: 0px;
  }
  .contentDiv{
    position: absolute;
    width: 80%;
    left: 18%;
    top: 7%;
    .searchDiv{
      width: 100%;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      z-index: 9999;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: space-between;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      margin-top: 3rem;
      .waringStyle{



      }

    }

    .tableList{
       padding: 1rem 0;

      .pagination-container{
        background: transparent;
      }
      :deep(.pagination){
        display: flex;
        justify-content: flex-end;
      }
       :deep(.el-pagination__total){
        color: white;
      }
       :deep(.el-pagination__jump) {
        color:white;
      }
    }
  }


  .h100{
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    width: 100%;
    height: 100%;
    .tanDiv{
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      background-color: #081F31;
      z-index: 222;
      opacity: 0.8;
    }
    .diaStyle{
      /* 修改弹框样式 */
      position: relative;
      width: 71rem;
      height: 43rem;
      background-image: url("../../assets/images/total.png");
      background-size: contain; /* 背景图片铺满并保持比例不变 */
      background-repeat: no-repeat; /* 不重复平铺 */
      background-position: center; /* 图片居中对齐 */
      padding: 2rem 3rem;
      z-index: 333;
       :deep(.el-tabs__item) {font-size: 1.2rem!important;color: white; font-family: PingFangSC, PingFang SC;font-weight: 500;}
       :deep(.el-tabs__item.is-active) {color: #1890ff;}
      .xx{
        width: 2rem;
        height: 2rem;
        position: absolute;
        top: -1rem;
        right: -1rem;
        cursor: pointer;
        img{
          width: 100%;
          height: 100%;
        }
      }
      .export{ position: absolute; right: 3rem;top: 2.2rem;cursor: pointer;z-index: 9999;}
      .warningContent{
        padding: 2rem 3rem;
        color: white;
        div:nth-of-type(1) span{
          font-family: HYYaKuHei, HYYaKuHei;
          font-weight: normal;
          font-size: 1.5rem;
          color: #FFFFFF;
        }
        div:nth-of-type(2){
          .baseSession{
            margin-top: 1.5rem;
            span{
              font-family: PingFangSC, PingFang SC;
              font-weight: 500;
              font-size: 1.2rem;
              line-height: 2.2rem;
              color: #FFFFFF;
            }
          }
          .mt10{
             :deep(.el-table thead) {
              background-color: #01B0FF!important;
            }
          }
        }


      }

      .warningContent1{
        padding: 2rem 3rem;
        color: white;
        height: 100%;
        .wt{
          font-family: HYYaKuHei, HYYaKuHei;
          font-weight: normal;
          font-size: 1.5rem;
          color: #FFFFFF;
          display: flex;
          align-items: center;
        }
        .wb{
          height: 80%;
          .baseSession{
            height: 100%;
            margin-top: 1.5rem;
            display: flex;
            .leftSession{
                flex: 1;
                padding: 3rem;
              p{
                line-height: 2rem;
              }
            }
            .rightSession{
                flex: 1;
                #kaoecharts{
                  width: 30rem;
                  height: 30rem;
                }
            }
          }
        }


      }
    }
  }

  .h101{
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    width: 100%;
    height: 100%;
    .tanDiv{
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      background-color: #081F31;
      z-index: 222;
      opacity: 0.8;
    }
    .diaStyle{
      /* 修改弹框样式 */
      position: relative;
      width: 71rem;
      height: 43rem;
      background-image: url("../../assets/images/total.png");
      background-size: contain; /* 背景图片铺满并保持比例不变 */
      background-repeat: no-repeat; /* 不重复平铺 */
      background-position: center; /* 图片居中对齐 */
      padding: 2rem 3rem;
      z-index: 333;
      .xx{
        width: 2rem;
        height: 2rem;
        position: absolute;
        top: -1rem;
        right: -1rem;
        cursor: pointer;
        img{
          width: 100%;
          height: 100%;
        }
      }
      .warningContent{
        width: 100%;
        height: 100%;
        padding: 2rem 3rem;
        color: white;
        .wt {
          width: 100%;
          height: 5%;
          span{
            font-family: HYYaKuHei, HYYaKuHei;
            font-weight: normal;
            font-size: 1.5rem;
            color: #FFFFFF;
          }
        }

        .wb{
          width: 100%;
          height: 95%;
          .baseSession{
            width: 100%;
            height: 100%;
            margin-top: 1.5rem;
            .echart{
              width: 65rem;
              height: 32rem;
            }
          }
        }


      }
    }
  }
}


</style>

